<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>材质</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- <script src="./controls/OrbitControls.js"></script> -->
    <!-- <script src="./three.js"></script> -->
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
  </head>

  <body>
    <script>
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
      /**
       * 创建网格模型
       */

      /**
       * 基础网格材质
       * MeshBasicMaterial
       */
      var basicGeometry = new THREE.SphereGeometry(60, 40, 40);
      var basicMaterial = new THREE.MeshBasicMaterial({
        color: 'blue'
      });
      var basicMesh = new THREE.Mesh(basicGeometry, basicMaterial);
      basicMesh.translateX(200);
      scene.add(basicMesh);

      /**
       * Lambert网格材质
       * MeshLambertMaterial
       */
      var lambertGeometry = new THREE.SphereGeometry(60, 40, 40);
      var lambertMaterial = new THREE.MeshLambertMaterial({
        color: '#fff',
        opacity: 0.7,
        transparent: true
      });
      var lambertMesh = new THREE.Mesh(lambertGeometry, lambertMaterial);
      scene.add(lambertMesh);

      /**
       * 高光Phong材质
       * MeshPhongMaterial
       */
      var phongGeometry = new THREE.SphereGeometry(60, 40, 40);
      var phongMaterial = new THREE.MeshPhongMaterial({
        color: '#fff',
        specular: 0x4488ee,
        shininess: 12
      });
      var phongMesh = new THREE.Mesh(phongGeometry, phongMaterial);
      phongMesh.translateX(-200);
      scene.add(phongMesh);

      /**
       * PBR物理材质
       * MeshStandardMaterial
       */
      var pbrGeometry = new THREE.SphereGeometry(60, 40, 40);
      var pbrMaterial = new THREE.MeshStandardMaterial({ color: 'fff' });
      var pbrMesh = new THREE.Mesh(pbrGeometry, pbrMaterial);
      pbrMesh.translateY(-200);
      scene.add(pbrMesh);

      /**
       * 法向材质
       * MeshNormalMaterial
       */
      var normalGeometry = new THREE.SphereGeometry(60, 40, 40);
      var normalMaterial = new THREE.MeshNormalMaterial({ overdraw: 0.5 });
      var normalMesh = new THREE.Mesh(normalGeometry, normalMaterial);
      normalMesh.translateY(200);
      scene.add(normalMesh);

      /**
       * 纹理贴图
       * ImageUtils.loadTexture
       */
      var imgGeometry = new THREE.SphereGeometry(60, 40, 40);
      var texture = THREE.ImageUtils.loadTexture(
        './imgs/image1.jpg',
        {},
        function () {
          renderer.render(scene, camera);
        }
      );
      var imgMaterial = new THREE.MeshLambertMaterial({
        map: texture
      });
      var imgMesh = new THREE.Mesh(imgGeometry, imgMaterial);
      imgMesh.translateX(200);
      imgMesh.translateY(200);
      scene.add(imgMesh);

      // 坐标辅助线
      var axisHelper = new THREE.AxisHelper(500);
      scene.add(axisHelper);
      /**
       * 光源设置
       */
      //点光源
      var point = new THREE.PointLight('#fff');
      point.position.set(200, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight('#072f64');
      scene.add(ambient);
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 500; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(20, 100, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor('black', 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作   指定场景、相机作为参数
      let T0 = new Date(); //上次时间
      function render() {
        let T1 = new Date(); //本次时间
        let t = T1 - T0; //时间差
        T0 = T1; //把本次时间赋值给上次时间
        requestAnimationFrame(render);
        renderer.render(scene, camera); //执行渲染操作
        imgMesh.rotateY(0.001 * t);
      }
      render();

      // function render() {
      //   renderer.render(scene, camera); //执行渲染操作
      // }
      // render();
      // var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
      // controls.addEventListener('change', render); //监听鼠标、键盘事件
    </script>
  </body>
</html>
